<template>
    <div class="report">
        <back :backTitle="studentName+'学业诊断'" :noBack="true" />
        <div class="condit">
            <div class="peroid">
                <div class="show-div"  @click="showMaskFun()">
                    <span>{{selectPeroidName}}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xialaxiao"></use>
                    </svg>
                </div>
                <div class="masks" v-if="showMask" @click="closeMaskFun()">
                    <transition name="peroid">
                        <ul v-show="showPeroid">
                            <li v-for="item in peroidList" :key="item.id" @click="selectPeroid(item)" :class="{active:selectPeroidId==item.id}">{{item.name}}</li>
                        </ul>
                    </transition>
                </div>
            </div>
            <div class="peroid">
                <div class="show-div" @click="showMaskStu()">
                    <span >{{studentName}}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xialaxiao"></use>
                    </svg>
                </div>
                <div class="masks" v-if="showStuMask" @click="closeMaskStu()">
                    <transition name="peroid">
                        <ul v-show="showStudent">
                            <li v-for="item in students" :key="item.oId" @click="selectStudent(item)" :class="{active:studentId==item.oId}">{{item.name}}</li>
                        </ul>
                    </transition>
                </div>
            </div>
        </div>
        <div class="report-list">
            <template v-for="item in reportList" v-if="reportList.length>0">
                <router-link :to="{path:'report-swiper',query:{reportId:item.reportId,areamTeamId:areamTeamId,studentName:studentName}} ">
                    <report-item :data="item"></report-item>
                </router-link>
            </template>
        </div>

        <loading ref="loadings" />
        <div class="empty" v-if="isEmpty">
            <empty text="没有报告数据哦" />
        </div>
    </div>
</template>
<script>
import Back from '../common/Back'
import ReportItem from './ReportItem'
import Loading from '../common/loading'
import Empty from '../common/Empty'

import io from '../../lib/io'
import util from '../../lib/util'
import loadMore from '../../lib/myDragLoader.js'
export default {
    name: 'report',
    components: {
        Back,
        ReportItem,
        Loading,
        Empty

    },
    data: function() {
        return {
            showMask: false,
            showStuMask:false,
            showPeroid: false,
            showStudent:false,
            selectPeroidName: "期数",
            selectPeroidId: '',
            peroidList: [],
            students: [],
            pageIndex: 1,
            pageSize: 10,
            studentId: '',
            studentName: '学生',
            reportList: [],
            areamTeamId: '',
            hasNext: true,
            accessToken: '',
            sysCode: '',
            isEmpty:false

        }
    },
    created() {
        this.accessToken = util.getQueryString('accessToken')
        localStorage.setItem('accessToken', this.accessToken)
        this.areamTeamId = util.getQueryString('areamTeamId') ? util.getQueryString('areamTeamId') : '564701030634225664'
        this.sysCode = util.getSysCode(this.areamTeamId)
        this.findCustomerBindStudent()
    },
    mounted() {
    },
    beforeDestroy() {
        loadMore.rmLoadMore(".report-list");
        $('.more').remove()

    },
    deactivated() {
        loadMore.rmLoadMore("report-list");
        $('.more').remove()
    },
    watch: {
        selectPeroidId: function(val) {
        },
        showMask: function(val) {
            if (val) {
                loadMore.rmLoadMore("report-list");
                $('.more').remove()
            } else {
                this.more()
            }
        }
    },
    methods: {
        removeMore(){
        loadMore.rmLoadMore("report-list");
        $('.more').remove()
        },
        findCustomerBindStudent() {
            io.post(io.findCustomerBindStudent, { sysCode: this.sysCode }, (ret) => {
                if(ret.data.length){
                this.studentId = ret.data[0].oId
                this.studentName=ret.data[0].name
                this.more()
                this.findTrim()
                this.students=ret.data
                }else{
                    alert('请先绑定学员')
                    return
                }
            })
        },
        more() {
            loadMore.loadMore(".report-list", '', () => {
                if (this.hasNext) {
                    this.reportStudentList()
                } else {
                    toast('没有更多咯')
                }
            }, 'more more-report')
        },
        findTrim() {
            let param = {
                sysCode: this.sysCode
            }
            io.post(io.findTrim, param, (ret) => {
                if (ret.success) {
                    let data = ret.data
                    data.unshift({ name: '全部', id: "" })
                    this.peroidList = ret.data
                    this.selectPeroidName = '期数'
                    this.selectPeroidId = ''
                    this.$nextTick(() => {
                        this.reportStudentList()
                    })
                } else {
                    alert(ret.desc)
                }
            })
        },
        showMaskFun() {
            this.showStuMask=false
            this.showStuMask=false
            if (this.showMask) {
                this.showPeroid = false
                setTimeout(() => {
                    this.showMask = false
                }, 500)
            } else {
                this.showMask = true
                this.showPeroid = true
            }
        },
        closeMaskFun() {
            this.showPeroid = false
            setTimeout(() => {
                this.showMask = false
            }, 500)
        },
        showMaskStu() {
            this.showMask=false
            this.showPeroid=false
            if (this.showStuMask) {
                this.showStudent = false
                setTimeout(() => {
                    this.showStuMask = false
                }, 500)
            } else {
                this.showStuMask = true
                this.showStudent = true
            }
        },
        closeMaskStu() {
            this.showStudent = false
            setTimeout(() => {
                this.showStuMask = false
            }, 500)
        },
        selectPeroid(row) {
            if (row.id != '') {
                this.selectPeroidName = row.name
                this.selectPeroidId = row.id
            } else {
                this.selectPeroidName = '期数'
                this.selectPeroidId = ''
            }
            this.pageIndex = 1
            this.reportList = []
            this.reportStudentList()

        },
        selectStudent(row) {
            if (row.oId != '') {
                this.studentName = row.name
                this.studentId = row.oId
            } else {
                this.studentName = '学生'
                this.studentId = ''
            }
            this.pageIndex = 1
            this.reportList = []
            this.reportStudentList()

        },
        reportStudentList() {
            if (this.$refs.loadings) {
                this.$refs.loadings.show = true
            }
            let param = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                studentId: this.studentId,
                sysCode: this.sysCode,
            }
            this.selectPeroidId ? param.baseTrimesterId = this.selectPeroidId : ''
            io.post(io.reportStudentList, param, (ret) => {
                if (ret.success) {

                    if (this.$refs.loadings) {
                        this.$refs.loadings.show = false;
                    }
                    if(this.reportList.length===0&&ret.data.list.length===0){
                    this.isEmpty=true
                    }else{
                        this.isEmpty=false
                    }
                    if (ret.data.list.length <= 0) {
                        this.hasNext = false
                        return
                    }
                    this.pageIndex++
                    this.reportList.push.apply(this.reportList, ret.data.list)
                } else {
                    alert(ret.desc)
                    if (ret.desc.indexOf('没找到该学生') > -1) {
                        setTimeout(() => {
                            window.history.back(-1)
                        }, 2000)
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.report {
    background: #f8f8f8;
    .condit {
        display: flex;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0.92rem;
        height: 0.76rem;
        background: #fff;
        z-index: 100;
    }
    .peroid {
        flex: 1;
        .show-div {
            width: 100%;
            height: 100%;
            line-height: 0.76rem;
            text-align: center;
            font-size: 28px;
            color: #3271f1;
        }
        .masks {
            width: 100%;
            height: calc(100% - 0.92rem - 0.76rem);
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            left: 0;
            top: calc(0.92rem + 0.76rem);
            z-index: 1000;
            ul {
                background: #fff;
                max-height: 6rem;
                overflow-y: auto;
                -webkit-transform-origin: top left;

                li {
                    height: 0.76rem;
                    line-height: 0.76rem;
                    font-size: 0.26rem;
                    color: #333;
                    padding-left: 0.3rem;
                    &.active {
                        color: #3271f1;
                        background: #e8e8e8;
                    }
                }
                li+li {
                    border-top: 1px solid #e8e8e8;
                }
            }
        }
    }
    .report-list {
        padding-top: 0.76rem;
    }
    .empty {
        padding-top: 0.2rem;
    }
}

.peroid-enter-active {
    animation: bounce-in .3s;
}

.peroid-leave-active {
    animation: bounce-in .3s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
</style>

